<script setup>
  import VisualLayout from '@/components/VisualLayout.vue';
  import LineChart from '@/components/LineChart.vue';
  import BarChartStackHorizontal from '@/components/BarChartStackHorizontal.vue';
  import BarChartCount from '@/components/BarChartCount.vue';
  import BarChartStack from '@/components/BarChartStack.vue';
  import BarLineChart from '@/components/BarLineChart.vue';
  import BarLineChart2 from '@/components/BarLineChart2.vue';
  import BarChartPictorial from '@/components/BarChartPictorial.vue';
  import PieHuan from '@/components/PieHuan.vue';

  const PieHuanParams = ref([
    {
      statusName: '设备稼动',
      statusText: '已完成',
      value: 80,
      color: 0,
    },
    {
      statusName: '工厂稼动',
      statusText: '结束',
      value: 30,
      color: 1,
    },
    {
      statusName: '经营稼动',
      statusText: '已完成',
      value: 80,
      color: 2,
    },
  ]);
  setTimeout(() => {
    PieHuanParams.value[0] = {
      statusName: '工厂稼动',
      statusText: '结束',
      value: 30,
      color: 1,
    };
  }, 2000);
  const statusList = [
    {
      icon: new URL(`../assets/image/device/icon0.png`, import.meta.url).href,
      percent: '90.21%',
      pname: '机械稼动率',
    },
    {
      icon: new URL(`../assets/image/device/icon1.png`, import.meta.url).href,
      percent: '70.21%',
      pname: '工场稼动率',
    },
    {
      icon: new URL(`../assets/image/device/icon2.png`, import.meta.url).href,
      percent: '40.01%',
      pname: '机械稼动率',
    },
  ];
</script>
<template>
  <VisualLayout>
    <div class="grid-container">
      <div class="column1">
        <LineChart></LineChart>
        <BarChartCount></BarChartCount>
      </div>
      <div class="column2">
        <div class="data-list">
          <div class="data-item">6/20早</div>
          <div class="data-item">CGA 472446</div>
          <div class="data-item">组立前 1#</div>
        </div>
        <div class="earth-box">
          <div class="status-box">
            <div v-for="(item, idx) in statusList" class="status-item">
              <div class="icon-box"><img :src="item.icon" alt="" /></div>
              <div class="percent">{{ item.percent }}</div>
              <div class="pname">{{ item.pname }}</div>
            </div>
          </div>
        </div>
        <div class="status-list">
          <PieHuan v-for="params in PieHuanParams" :params="params"></PieHuan>
        </div>
      </div>
      <div class="column3">
        <BarChartStack></BarChartStack>
        <BarLineChart2></BarLineChart2>
      </div>
    </div>
  </VisualLayout>
</template>

<style lang="less" scoped>
  .grid-container {
    height: 100%;
    display: flex;
    padding: 30px;
    padding-top: 0px;
    /* 行间距 */
    .column1,
    .column3 {
      display: flex;
      flex-direction: column;
      width: 30%;
      grid-row: span 2;
    }

    .column2 {
      width: 40%;
      grid-row: span 2;
      padding: 0px 20px;
      display: flex;
      flex-direction: column;
    }
  }
  .earth-box {
    position: relative;
    text-align: center;
    padding-bottom: 20px;
    flex: 1;
    min-height: 300px;

    .status-box {
      position: relative;
      height: 100%;
      justify-content: space-around;
      background: url(../assets/image/device/earth-bg.png) bottom center no-repeat;
      background-size: 100% auto;
      text-align: center;

      .status-item {
        width: 118px;
        color: white;
        font-weight: bold;
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &:nth-child(1) {
          bottom: 23%;
          left: 50%;
          margin-left: -50px;

          .percent {
            background: linear-gradient(0deg, #00d7fe 0.4%, #f7fafd 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        &:nth-child(2) {
          right: 16%;
          bottom: -48px;
          .percent {
            background: linear-gradient(0deg, #edc777 0.4%, #f7fafd 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        &:nth-child(3) {
          left: 12%;
          bottom: -48px;
          .percent {
            background: linear-gradient(0deg, #4385d6 0.4%, #f7fafd 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .icon-box {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 147px;
          height: 147px;
          background: url(../assets/image/device/icon-bg.png) center 0px no-repeat;
          background-size: 100% 100%;
        }

        .percent {
          font-size: 28px;
          font-weight: bold;
        }

        .pname {
          font-size: 19px;
          color: #ffffff;
        }
      }
    }
  }
  .data-list {
    display: flex;
    justify-content: space-between;
    padding: 50px 30px;

    .data-item {
      width: 30%;
      min-width: 29%;
      height: 54px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #a1c8fa;
      background: url(../assets/image/device/status-bg.png) 0px 0px no-repeat;
      background-size: 100% 100%;
      font-size: 24px;
      color: white;
      box-sizing: border-box;
      padding-bottom: 4px;
    }
  }

  .status-list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 265px;
  }

  @media (min-width: 1024px) {
  }
</style>
